<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { CheckboxGroupOnChangeEvent } from '@uni-helper/uni-app-types'
import { navigateBack, navigateTo } from '@uni-helper/uni-promises'
import { PlatformCnEnum } from '@/constant/enum'
import { getAppletUserInfoAlipay, getDecryptPhone } from '@/api/user'

const isChecked = ref(false)

const buttonName = ref('')
/**
 * 跳转到隐私政策页面
 */
function toPrivacyPolicy() {
    uni.navigateTo({
        url: '/package-mine/pages/privacy-policy/privacy-policy',
    })
}

/**
 * 跳转到用户协议页面
 */
function toUserAgreement() {
    uni.navigateTo({
        url: '/package-mine/pages/user-agreement/user-agreement',
    })
}
/**
 * 用户授权
 *
 * @returns 无返回值，调用成功后通过 handleToNext 回调函数处理结果
 */
async function onGetAuth() {
    let phone = ''
    let openId = ''
    const codeInfo = await uni.login()
    // ifdef MP-ALIPAY
    if (codeInfo) {
        const info = await getAppletUserInfoAlipay({
            code: codeInfo.code,
        })
        openId = info.openid
    }
    const cryptPhone = await my.getPhoneNumber({})
    if (cryptPhone) {
        const res = await getDecryptPhone({
            response: cryptPhone.response,
        })
        phone = res.mobile
    }
    handleToNext(phone, openId)
    // endif
}

/**
 * 跳转到注册表单页面
 *
 * @param phone 手机号
 * @param opendId 用户openid
 */
function handleToNext(phone: string, opendId: string) {
    navigateTo({
        url: `/pages/basic-form/basic-form?phone=${phone}&openId=${opendId}`,
    })
}

/**
 * 监听复选框组变化事件
 *
 * @param e 复选框组变化事件的详细信息
 * @returns 无返回值
 */
function onCheckboxChange(e: CheckboxGroupOnChangeEvent) {
    console.log(321, e)
    isChecked.value = !!e.detail.value
}

/**
 * 返回上一页
 *
 * @returns 无返回值
 */
function toBack() {
    navigateBack()
}

onMounted(() => {
    const systemInfo = uni.getSystemInfoSync()
    buttonName.value = PlatformCnEnum[systemInfo?.uniPlatform as keyof typeof PlatformCnEnum] || '支付宝'
})
</script>

<template>
    <NavbarContainer background-url="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerfefc5fdc-7e11-4326-822e-a3b393f0d692.png">
        <view class="set-bg flex flex-col items-center">
            <img class="mt-300rpx h-265rpx w-265rpx" src="../static/images/login/logo.png" alt="">
            <button :disabled="!isChecked" open-type="getPhoneNumber"
                    class="mt-300rpx rounded-full bg-orange px-60rpx text-white"
                    :class="{ 'text-opacity-50 bg-op-50': !isChecked }" @getphonenumber="onGetAuth">
                一键登录
            </button>
            <view class="mt-100rpx text-lg text-gray" @click="toBack">暂不登录</view>
            <view class="mt-40rpx px-60rpx">
                <view class="reset-chechbox flex">
                    <checkbox value="checked" :checked="isChecked" icon-color="#ffffff" class="mr-32rpx flex-shrink-0"
                              @change="onCheckboxChange" />
                    <view class="text-xs text-lightgray line-height-loose">
                        <text>我已阅读并同意,</text>
                        <text class="text-primary" @click="toUserAgreement">《子弹工作平台用户服务协议》</text>
                        <text class="text-primary" @click="toPrivacyPolicy">《隐私协议》</text>
                        <text>并已了解手机号将被用于同步平台数据及薪资发放通知</text>
                    </view>
                </view>
            </view>
        </view>
    </NavbarContainer>
</template>

<style scoped>
.set-bg {
    background: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerfefc5fdc-7e11-4326-822e-a3b393f0d692.png') repeat-y;
    background-size: 100% 100%;
}

.reset-chechbox::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 40rpx;
    height: 40rpx;
    color: #fff;
}

.reset-chechbox checkbox-checked::before {
    content: '';
    position: absolute;
    left: -2rpx;
    top: 0;
    width: 40rpx;
    height: 40rpx;
    border: none;
    color: #fff;
}
</style>

<route lang="json">
{
    "style": {
        "mp-alipay": {
            "transparentTitle": "always"
        }
    }
}
</route>
